<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>BRACKETS 入门</title>
        <meta name="description" content="Brackets 交互式入门指引。">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        
        <h1>BRACKETS 入门</h1>
        <h2>让我为您隆重介绍！</h2>
        
        <!--
            用 <3 和 JavaScript 编写
        -->
        
        <p>
            欢迎使用 Brackets，这是个专为网页设计而开发的现代化开放源代码编辑器。
            轻巧而给力，整合多项可视化的编辑功能，在需要时为您提供及时的协助。
        </p>
        
        <!--
            Brackets 是什么？
        -->
        <p>
            <em>Brackets 与众不同。</em>
            Brackets 提供「快速编辑」、「实时预览」等其他编辑器没有的功能。
            而且 Brackets 是基于 JavaScript, HTML 及 CSS 开发的。
            大多数使用 Brackets 的开发者都可以方便的对它进行修改和扩展。
            实际上，Brackets 本身就是我们使用 Brackets 打造出来的。
            如果您想学会如何使用这些功能，请继续浏览本指引。
        </p>
        
        <!--
            从您的项目开始上手
        -->
        
        <h3>Brackets 中的「工程」</h3>
        <p>
            只要打开保存项目代码的目录，就能使用 Brackets 进行编辑。
            Brackets 会将当前打开的目录视为一个「工程」，「程序提示」、「实时预览」及「快速编辑」等功能都只会参考该工程中的文件。
        </p>
        
        <samp>
            如果您已经准备好关闭示例工程，开始编写您的代码，可以使用侧边栏的下拉式菜单来切换目录。
            当前已选择「Getting Started」，也就是您现在看到的这个文件所在的目录。
            单击下拉式菜单，选择「打开目录…」选项，就能打开您的项目目录。
         
            之后，您也可以通过下拉菜单切换已打开的目录，包括这个示例工程。
        </samp>
        
        <!--
            HTML, CSS 及 JavaScript 之间的关系
        -->
        <h3>CSS 及 JavaScript 快速编辑</h3>
        <p>
            别再因为不断切换文件而烦恼了。在编辑 HTML 时，按下 <kbd>Cmd/Ctrl + E</kbd>
            快捷键打开编辑器，编辑相关 CSS 规则。
            调整好 CSS 样式后，按 <kbd>ESC</kbd> 马上就能回到 HTML 继续编辑。
            此外，也可以让那些 CSS 规则一直显示在 HTML 编辑器里。
            只要在快速编辑器的范围外按下 <kbd>ESC</kbd> 键，就能关掉所有快速编辑器。
            快速编辑也能找到在 LESS 及 SCSS 文件中定义的规则，即使是巢状规则也没问题。
        </p>
     
        <samp>
            想实际体验吗？把光标移到上面的 <!-- <samp> --> 标签中，按下 <kbd>Cmd/Ctrl + E</kbd>。
            您就会看到 CSS 快速编辑器出现在上方，显示出所有套用的 CSS 规则。
            快速编辑功能还支持 class 及 id 属性。搭配 LESS 或 SCSS 文档更方便。
         
            您也可以通过这种方式添加规则。点击以上的 <!-- <p> --> 标签，按 <kbd>Cmd/Ctrl + E</kbd>。
            可以看到它上面并没有任何 CSS　規則，但您可以点击「新增规则」按钮，就可以添加 <!-- <p> --> 规则。
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="CSS 快速编辑界面" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            您也可以使用相同的快捷键编辑其他内容，例如 JavaScript 函数、CSS 色彩、CSS 动画计时函数等，更多功能持续增加中。
        </p>
        <p>
            目前还不能在快速编辑器中打开其它快速编辑器，只有光标在主编辑器时才能使用快速编辑功能。
        </p>
        
        <!--
            实时预览
        -->
        <h3>在浏览器中实时预览 HTML 及 CSS 变更</h3>
        <p>
            有一种舞叫做「保存再刷新探戈」，我们跳了好多年，您经历过吗?
            在编辑器里修改内容，保存，再切换至浏览器，按「刷新」后才能看到结果，太 Low 了！
            用 Brackets，您永远不必再这么「跳」。
        </p>
        <p>
            Brackets 会与您本机的浏览器<em>实时连接</em>，在您修改的同时更新 HTML 及 CSS 内容！
            说不定活在 21 世纪的您，已经用浏览器提供的开发者工具做过类似的事了。
            但是用 Brackets，您不用再手动将代码复制粘贴回编辑器。
            您的程序虽然是跑在浏览器上，但所有的代码都还在编辑器里！
        </p>
        
        <h3>实时高亮 HTML 元素及 CSS 规则</h3>
        <p>
            Brackets 让您更容易看到 HTML 及 CSS 的修改会对页面造成什么影响。
            当光标停在 CSS 规则上时，Brackets 会在浏览器里高亮所有受影响的元素。
            编辑 HTML 文件时，Brackets 也会在浏览器中高亮对应的 HTML 元素。
        </p>
        
        <samp>
            如果您安装了 Google Chrome，可以马上试试看。
            点击 Brackets 右上角的闪电图标，或按 <kbd>Cmd/Ctrl + Alt + P</kbd>。
            当实时预览功能在 HTML 文档上启用后，所有连接到的 CSS 文档也都可以进行实时预览。
            Brackets 与您的浏览器建立连接时，图标会由灰色变成金色。
            
            现在，将光标移到以上的 <!-- <img> --> 标签。注意看 Chrome 图片上显示的蓝色框。
            接下來，按 <kbd>Cmd/Ctrl + E</kbd> 快速编辑相关 CSS 规则。
            试着将边框 (border) 值由 10px 改成 20px，或将背景色 (background-color) 由透明 "transparent" 改成 "hotpink"。
            如果您把 Brackets 与浏览器并排摆放，就能看到所有变动都直接反应到浏览器上了。酷吧！
        </samp>
        
        <p class="note">
            目前 Brackets 只支持实时预览 HTML 及 CSS。不过，
            存储修改过的 JavaScript 文件时也会自动重新载入页面。
            我们正在努力让实时预览功能支持 JavaScript。
            此外，实时预览功能目前只支持 Google Chrome ，我们希望将来能支持所有主流的浏览器。
        </p>
        
        <h3>快速查看</h3>
        <p>
            为了那些不熟悉颜色的十六进制值或 RGB 值的同学，Brackets 能快速简单的让您查看颜色。
            不管在 CSS 或 HTML 中，只要将鼠标光标移到任何颜色值或渐变色上，Brackets 就会自动显示预览。
            对图片也同样有用，在 Brackets 里将鼠标光标移到图片链接上，就会自动显示预览图。
        </p>
        
        <samp>
            赶快来试试快速查看，只要将光标移到文件最上面的 <!-- <body> --> 标签，按下 <kbd>Cmd/Ctrl + E</kbd>
            启动 CSS 快速编辑器，將鼠标光标移到 CSS 上的任何一个颜色值上就能看到。
            想要预览渐变色，您也可以在 <!-- <html> --> 标签上开启 CSS 快速编辑器，移到背景图片 (background-image) 值就能看到。
            要进行图片预览，将光标移到图片的链接就能看到预览。
        </samp>
        
        <h3>还不能满足您？安装扩展功能吧！</h3>
        <p>
            除了 Brackets 内置的功能外，日益壮大的开发者社区已经编写出了数百个扩展功能。
            如果您觉得 Brackets 少了什么功能，说不定早就有人已经写好了。
            点击 <strong>文件 > 扩充功能管理...</strong>，再点击「可使用」标签，就能浏览或搜索扩展功能列表。
            一旦找到想要的扩展功能，单击后面的「安装」按钮就可以了。
        </p>
        
        <!--
            告诉我们您的想法
        -->
        <h2>一起参与</h2>
        <p>
            Brackets 项目是开放源代码的。世界各地的 Web 开发者贡献一己之力，只为打造出更好的代码编辑器。
            也有不少人正在开发扩展功能，让 Brackets 更强大。
            告诉我们您的想法，分享您的 idea，或直接为项目做点事吧。
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets 开发团队博客</a></li>
            <li><a href="https://github.com/adobe/brackets">GitHub 上的 Brackets</a></li>
            <li><a href="https://brackets-registry.aboutweb.com">Brackets 扩展库</a></li>
            <li><a href="https://github.com/adobe/brackets/wiki">Brackets 维基</a></li>
            <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets 开发者论坛</a></li>
            <li><a href="https://twitter.com/brackets">Twitter 上的 @brackets</a></li>
            <li>在 <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">在 Freenode 的 #brackets</a> IRC 频道与 Brackets 开发者聊天</li>
        </ul>
        
    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->

<!-- Last translated for e3ecc9e7ac7b94f1107a8e3ca7064ac39b345280 -->
